<template>
  <px-form-item label="巡检组" prop="checkGroup" :rules="{ required: props.isRequired, message: '请选择巡检组', trigger: 'change' }">
    <px-select v-model="checkGroupVal" clearable filterable placeholder="请选择巡检组" style="width: 100%" @change="changeCheckGroup">
      <px-option v-for="item in checkGroupList" :key="item.id" :label="item.name" :value="item.code" />
    </px-select>
  </px-form-item>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";
import { getGroupList } from "@/api/erc/inspectPlan";

// 父级方法和值
const emits = defineEmits(["changeCheckGroup"]);
const props = defineProps(["checkGroup", "isRequired"]);

const checkGroupVal = ref("");
const checkGroupList = ref([]);

watch(
  () => props.checkGroup,
  val => {
    checkGroupVal.value = val;
  },
  { immediate: true }
);
onMounted(() => {
  queryCheckGroupSelect();
});
// 获取巡检组下拉列表
const queryCheckGroupSelect = async () => {
  const tempCheckGroupList = await getGroupList({ name: "" });
  checkGroupList.value = tempCheckGroupList || [];
};
// 改变巡检组值，传值给父级并做改变
const changeCheckGroup = () => {
  emits("changeCheckGroup", checkGroupVal.value);
};
</script>
